<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
		<link rel="stylesheet" href="css/xiaoMiLogin.css">
		<title>小米登录注册</title>
	</head>
	<body>
		<!-- 209010238薛本莲 -->
		<div class="myLogin">
			<div class="leftBanner"></div>
			<div class="rightContent">
				<div class="head">
					<div class="leftLogo">
						<div class="miLogo">
							<img src="img/icon-小米归属.png">
						</div>
						小米帐号
					</div>
					<div class="rightWord">
						<a href="#">用户协议</a>
						<a href="#">隐私政策</a>
						<a href="#">帮助中心</a>
						<div class="line"></div>
						<div class="language" @mouseenter="subShow()" @mouseleave="subHidden()">
							‎中文(简体)‎
							<img src="img/下拉.png">
							<!-- 二级菜单 -->
							<ul class="secondMenu" v-show='show'>
								<li>‎‎中文(繁體)‎</li>
								<li>‎‎‎English‎</li>
							</ul>
						</div>

					</div>
				</div>
				<!-- 登录、注册 -->
				<div class="main">
					<div class="codeBox">
						<div class="code"><img src="img/二维码.png"></div>
						<div class="codeWord">
							扫码登陆
						</div>
					</div>
					<div class="mainSection">
						<div class="title">
							<div class="log">
								<a href="#" @click="toLog" :class="[showReg ? 'blur':'' ]" class="choicLog">登录</a>
								<div :class="[showLog ? 'choic':'' ]"></div>
							</div>
							<div class="reg">
								<a href="#" @click="toReg" :class="[showLog ? 'blur':'' ]" class="choicReg">注册</a>
								<div :class="[showReg ? 'choic':'' ]"></div>
							</div>

						</div>
						<div class="miform">
							<div class="loginForm" v-show="showLog">
								<div class="miId">
									<input type="text" placeholder="邮箱/手机号码/小米ID" @blur="showIdPro($event)" class="id"
										:class="[IdPro?'red':'']">
									<span v-show="IdPro">请输入账号</span>
								</div>
								<div class="miPsw">
									<input type="text" placeholder="密码" @blur="showpswPro($event)" class="psw"
										:class="[pswPro?'red':'']">
									<span v-show="pswPro">请输入密码</span>
								</div>
								<div class="know">
									<span class="check"><input type="checkbox"></span>
									<span class="accept">已阅读并同意小米帐号
										<a href="#">用户协议</a> 和
										<a href="#">隐私政策</a>
									</span>
								</div>
								<div class="buttonBox">
									<button>登录</button>
								</div>
								<div class="forget">
									<span><a href="#">忘记密码？</a></span>
									<span><a href="#">手机号登录</a></span>
								</div>
								<div class="otherWay">
									<p>其他方式登录</p>
									<div class="otherImg">
										<a href="#"><img src="img/zfb.png"></a>
										<a href="#"><img src="img/wx.png"></a>
										<a href="#"><img src="img/tx.png"></a>
										<a href="#"><img src="img/wb.png"></a>
									</div>
								</div>
							</div>
							<div class="enrollForm" v-show="showReg">
								<div class="area">
									<span>国家/地区</span>
									<select>
										<option value="中国" selected disabled>中国</option>
										<option value="中国香港">中国香港</option>
										<option value="中国台湾">中国台湾</option>
										<option value="美国">美国</option>
										<option value="英国">英国</option>
										<option value="意大利">意大利</option>
										<option value="艾欧里亚">艾欧里亚</option>
										<option value="瓦罗兰">瓦罗兰</option>
										<option value="新西兰">新西兰</option>
										<option value="巴西">巴西</option>
										<option value="西巴">西巴</option>
										<option value="乌拉"> 乌拉</option>
									</select>
								</div>
								<div class="phonNum">
									<div class="cityCode">
										<div>国家码</div>
										<select>
											<option disabled selected>+86</option>
										</select>
									</div>
									<div class="inputNum">
										<input type="text" placeholder="手机号" @blur="showsjhm($event)"
											:class="[sjhm?'red':'']">
										<span class="sjhm" v-show="sjhm">请输入手机号</span>
									</div>
								</div>
								<div class="yzm">
									<div class="inputYzm">
										<input type="text" placeholder="请输入验证码" @blur="showsrYzm($event)"
											:class="[srYzm?'red':'']">
										<span class="srYzm" v-show="srYzm">请输入验证码</span>
									</div>
									<button class="hqYzm" @click="randomNum">获取验证码</button>
								</div>
								<div class="know">
									<span class="check"><input type="checkbox"></span>
									<span class="accept">已阅读并同意小米帐号
										<a href="#">用户协议</a> 和
										<a href="#">隐私政策</a>
									</span>
								</div>
								<div class="dlBtn">
									<button>注册</button>
								</div>
								<div class="forget">
									<span><a href="#">收不到验证码?</a></span>
								</div>
								<div class="otherWay">
									<p>其他方式登录</p>
									<div class="otherImg">
										<a href="#"><img src="img/zfb.png"></a>
										<a href="#"><img src="img/wx.png"></a>
										<a href="#"><img src="img/tx.png"></a>
										<a href="#"><img src="img/wb.png"></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 版权 -->
				<div class="footer">
					小米公司版权所有-京ICP备10046444-
					<a href="#">京公网安备11010802020134号</a>
					-京ICP证110507号
				</div>
			</div>

	</body>
	<!-- 209010238薛本莲 -->
	<script>
		const vm = Vue.createApp({
			data() {
				return {
					show: false, //语言切换二级菜单
					showLog: true, //转到登录页
					showReg: false, //转到注册页
					IdPro: false, //登录Id提示
					pswPro: false, //登录密码提示
					sjhm: false, //注册手机号提示
					srYzm: false //注册验证码提示
				}
			},
			methods: {
				// 二级菜单展示
				subShow: function() {
					this.show = true;
				},
				subHidden: function() {
					this.show = false;
				},
				// 页面跳转
				toLog() {
					this.showLog = true,
					this.showReg = false
				},
				toReg() {
					this.showLog = false,
					this.showReg = true
				},
				// 输入框失去焦点
				// 登录页
				showIdPro(e) {
					// console.log(e.target.value)//输入框中值
					if (e.target.value == '') {
						this.IdPro = true
					} else this.IdPro = false

				},
				showpswPro(e) {
					if (e.target.value == '') {
						this.pswPro = true
					} else this.pswPro = false
				},
				// 注册页
				showsjhm(e) {
					if (e.target.value == '') {
						this.sjhm = true
					} else this.sjhm = false
				},
				showsrYzm(e) {
					if (e.target.value == '') {
						this.srYzm = true
					} else this.srYzm = false
				},
				// 随机数
				randomNum() {
					var code = '';
					//设置长度
					var codeLength = 4;

					//设置随机字符
					var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
					for (var i = 0; i < codeLength; i++) {
						//设置随机数范围,这设置为0 ~ 36
						var index = Math.floor(Math.random() * 9);
						//字符串拼接 将每次随机的字符 进行拼接
						code += random[index];
					}

					//将拼接好的字符串赋值给展示的code
					this.code = code;
					alert(code);
				}
			}
		}).mount(".rightContent");
	</script>
</html>